<!--
 * @Author: your name
 * @Date: 2020-12-01 14:34:17
 * @LastEditTime: 2020-12-01 15:08:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \FenXiaoShangChengAdmind:\工作资料\project_wjh\KunLunAdmin\web\KunLunAdmin\src\components\LcM\other\color_picker.vue
-->
<!-- system.vue-->
<template>
     <section class="color-select-container">
    <div
      class="color-con"
      :style="{ background: color }"
      @click="handleShowColor"
    >
      {{ showBtnText || "请选择颜色" }}
    </div>
    <div 
      v-show="colorShow"
      class="color-picker-box"
      >
      <sketch-picker v-model="colors" @input="updateValue"></sketch-picker>
    </div>
  </section>
 
</template>
<script>
/* 
  安装vue-color
  npm i vue-color -S


  使用：
  
  import color_picker from "@/components/LcM/other/color_picker";


  "color-picker": color_picker,

   <color-picker 
      :formData="formData"
      colorName="zlkColour"
    />
*/

import { Sketch } from "vue-color";
export default {
  props: {
    formData: {
      type: [Object],
    },
    colorName: {
      type: [String],
      default: "color",
    },
    checkBtnText: {
      type: [String],
      default: "请选择",
    },
  },
  name: "system",
  components: {
    "sketch-picker": Sketch,
  },
  mounted () {
    this.showBtnText = this.checkBtnText;
  },
  data() {
    return {
      showBtnText: "按钮文字",
      color: "#000",
      // 颜色选择器
      colorShow: false,
      colors: {
        hex: "#194d33",
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1,
      },
    };
  },
  methods: {
    // 颜色选择器
    handleShowColor() {
      if (this.colorShow) {
        this.colorShow = false; //关闭状态
        this.showBtnText = "请选择";
      } else {
        this.colorShow = true; //开启状态
        this.showBtnText = "确认";
      }
    },
    updateValue(val) {
      console.log("颜色选择", val); // 输出参数如下图1-1
      this.color = val.hex; //16进制
      //赋值
      this.formData[this.colorName] = val.hex;
    },
  },
};
</script>

<style lang="scss" scoped>
.color-select-container {
  position: relative;
  display: inline-block;
}

.color-con {
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 1px solid #ddd;
  background-color: #fff !important;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
  transition: .5s linear all;
}

.color-con:hover {
  background-color: #efefef !important;
  cursor: pointer;
  transition: .5s linear all;
}

.color-picker-box {
  position: absolute;
  top: 0;
  left: 80px;
  z-index: 10;
}
</style>